<template>
	<!-- 帮买取快递废品回收-门店管理 -->
	<div>
		<!-- 头部 -->
		<el-row>
			<!-- 面包屑 -->
			<el-col>
				<el-breadcrumb separator="/" style="margin-bottom: 10px;">
					<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/help/store' }">帮买取快递废品回收-门店管理</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<!-- 分类 -->
			<div class="block classify">
				<el-radio-group v-model="show_UpDown">
					<el-radio-button label="全部门店"></el-radio-button>
					<el-radio-button label="上架中"></el-radio-button>
					<el-radio-button label="已下架"></el-radio-button>
				</el-radio-group>
			</div>
			<!-- 搜索、操作 -->
			<el-col class="inp">
				<div class="block">
					<span class="demonstration">门店名称：</span>
					<el-input v-model="select_list.keyword" placeholder="请输入要查询的门店名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">门店手机号：</span>
					<el-input v-model="select_list.shopPhone" placeholder="请输入要查询的门店手机号"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">提交日期：</span>
					<el-date-picker v-model="dataValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="get_value"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="block">
					<el-button type="primary" @click="get_value">搜索</el-button>
				</div>
			</el-col>
			<div class="block" style="margin-bottom: 10px;">
				<el-button type="primary" @click="addNew">新增门店</el-button>
			</div>
			<!-- 添加表单 -->
			<el-dialog :title="title" :visible.sync="addOrUpdata">
				<el-form :model="addData">
					<el-form-item label="门店名称" label-width="100px">
						<el-input v-model="addData.shopName"></el-input>
					</el-form-item>
					<el-form-item label="门店手机号" label-width="100px">
						<el-input v-model="addData.shopPhone"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" label-width="100px">
						<el-cascader v-model="addValue" :options="options"></el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" label-width="100px">
						<el-input v-model="addData.shopAddress"></el-input>
					</el-form-item>
					<el-form-item label="小区坐标" label-width="100px">
						<el-button @click="getBeiDou">获取位置</el-button>
						<span v-show="addData.shopLongitude">
							{{addData.shopLongitude}} , {{addData.shopLatitude}}
						</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addOrUpdata = false">取 消</el-button>
					<el-button type="primary" @click="makeAdd">确 定</el-button>
				</div>
			</el-dialog>
		</el-row>
		<!-- 主体 -->
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" border style="width: 100%;" :header-cell-style="tableStyle"
				:cell-style="tableCen">
				<el-table-column prop="shopName" label="门店">
				</el-table-column>
				<el-table-column prop="shopId" label="ID">
				</el-table-column>
				<el-table-column prop="shopPhone" label="门店手机号">
				</el-table-column>
				<el-table-column prop="shopAddress" label="门店地址">
				</el-table-column>
				<el-table-column prop="addTime" label="营业时间" width="160px">
				</el-table-column>
				<el-table-column prop="shopCommunitySort" label="关联小区">
				</el-table-column>
				<el-table-column prop="shopOrderCount" label="订单总数">
				</el-table-column>
				<el-table-column prop="deliveryOrderCount" label="提交方式">
				</el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<span>
							<el-tag :type="scope.row.shopStatus==1?'success':'danger'">
								{{ scope.row.shopStatus==1?'上架中':'已下架' }}
							</el-tag>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-link type="danger" :underline="false" @click="modifyData(scope.row)">编辑</el-link>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<!-- 分页 -->
		<el-row style="text-align: center; margin-top: 20px;">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="select_list.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="select_list.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="select_list.total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	import citys from '../../assets/data/citydata.js'
	export default {
		data() {
			return {
				// 查看上下架
				show_UpDown: '全部门店',
				// 查询显示条件
				select_list: {
					keyword: '',
					shopPhone: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 10,
					total: 1
				},
				// 搜索时间差
				dataValue: '',
				// 表格数据
				tableData: [],
				// 级联地址数据
				options: citys,
				// 添加数据
				addData: {
					shopAddress: "", //详细位置
					shopCity: "", //市
					shopDescribe: "", //营业时间
					shopDistrict: "", //区
					shopImage: "", //图片
					shopLatitude: "", //纬
					shopLongitude: "", //经
					shopName: "", //名称
					shopPhone: "", //手机号
					shopProvince: "", //省
				},
				// 弹出窗口
				title: '新增门店', //窗口标题
				addOrUpdata: false, //窗口显示与否
				addValue: [],
				// 完整地址
				allAddress: '',
				// 样式
				tableStyle: {
					'background-color': '#409eff',
					'color': 'white',
					'text-align': 'center'
				},
				tableCen: {
					'text-align': 'center'
				}
			}
		},
		methods: {
			// 添加操作
			addNew() {
				this.addData = {}
				this.title = '新增门店'
				this.addOrUpdata = true
			},
			// 修改门店数据
			modifyData(data) {
				// console.log(data)
				this.addData = data
				this.title = '修改门店'
				this.addValue = [data.communityProvince, data.communityCity, data.communityDistrict]
				this.addOrUpdata = true
			},
			// 添加操作
			makeAdd() {
				this.splicing()
				let link = 'http://43.143.190.87:8091/panghudaojiaBackend/shop/addShop'
				let mess = '数据添加'
				if (this.title == '修改门店') {
					link = 'http://43.143.190.87:8091/panghudaojiaBackend/shop/modifyShop'
					mess = '数据修改'
				}
				this.$http.post(link, this.addData)
					.then((res) => {
						// console.log(res)
						if (res.data.status == 200) {
							this.$message.success(mess + '成功')
							this.get_value()
						} else {
							this.$message.error(mess + '失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
				this.addOrUpdata = false
			},
			// 获取数据
			get_value() {
				console.log(this.select_list)
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/shop/querySearchShopList', {
						params: this.select_list
					})
					.then((res) => {
						// console.log(res.data.data.list)
						if (res.status == 200) {
							this.tableData = res.data.data.list
							this.select_list.total = res.data.data.total
						} else {
							this.$message.error('数据获取失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 获取位置
			getBeiDou() {
				this.splicing()
				// console.log(this.allAddress)
				this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
						params: {
							key: '457886b5972a97e93fb9cdccebfd450f',
							address: this.allAddress
						}
					})
					.then((res) => {
						// console.log(res.data.geocodes[0].location)
						let locat = res.data.geocodes[0].location.split(',')
						this.addData.shopLongitude = locat[0]
						this.addData.shopLatitude = locat[1]
						// console.log(this.addData)
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 拼接完整地址
			splicing() {
				this.allAddress = this.addData.shopProvince + this.addData.shopCity + this.addData.shopDistrict +
					this.addData.shopAddress
			},
			// 每页条数改变
			handleSizeChange(size) {
				this.select_list.pageSize = size
				this.get_value()
			},
			// 页码改变
			handleCurrentChange(num) {
				this.select_list.pageNum = num
				this.get_value()
			},
		},
		mounted() {
			this.get_value()
		},
		watch: {
			// 监听搜索日期变化
			dataValue(newdata) {
				this.select_list.startTime = newdata[0]
				this.select_list.endTime = newdata[1]
			},
			// form级联框改变
			addValue(newValue) {
				this.addData.shopProvince = newValue[0]
				this.addData.shopCity = newValue[1]
				this.addData.shopDistrict = newValue[2]
			},
		},
	}
</script>

<style>
	.inp {
		margin-bottom: 10px;
		display: flex;
		flex-flow: wrap;
		justify-content: start;
	}

	.inp .block {
		margin-top: 10px;
		margin-right: 5px !important;
	}

	.el-date-editor--daterange.el-input__inner {
		width: 300px;
	}

	.classify {
		width: 100% !important;
		display: flex;
		flex-flow: nowrap;
		justify-content: start !important;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		background: none;
		color: #00ffff;
		border: none;
		font-size: 20px;
		box-shadow: none;
	}

	.el-radio-button__inner {
		border: none;
		font-size: 20px;
	}

	.el-radio-button:first-child .el-radio-button__inner {
		border: none;
	}
</style>